<%@ page contentType="text/html;charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="tags" tagdir="/WEB-INF/tags"%>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<html>
<head>
<title>微信分组</title>
<script
	src="${ctx}/static/selectWin/appSelector.js?version=${applicationScope.jsVersion }"
	type="text/javascript"></script>
<script type="text/javascript">
	var $grid;
	var selectIndex;
	var selectIndex2 = -1;
	var index;
	var row;
	var editRow = true;
	$(function() {
		$grid = $("#grid").datagrid($.extend(datagridOption, {
			//title : '微信分组',
			url : "${ctx}/wx/groups/dataGrid",
			showFooter : true,
			sortName : "originGroupId",
			sortOrder : "aes",
			onDblClickRow : function(rowIndex, rowData) {
				if (selectIndex2 != -1) {
					$(this).datagrid("endEdit", selectIndex2);
				}
				selectIndex2 = rowIndex;
				selectIndex = rowIndex;
				//给实体赋初值
				$grid.datagrid("updateRow", {
					index : rowIndex,
					row : {
						"appName" : rowData.app ? rowData.app.appName : null
					}
				});
			},
			columns : [ [ {
				field : 'ck',
				checkbox : true
			}, {
				field : 'appName',
				title : '所属公共账号',
				sortable : true,
				editor : {
					type : "comboselector",
					options : $.extend(appSelectOpts, {
						idField : "appName",
						textField : "appName",
						onEnter : function(val) {
							$("#grid").datagrid("endEdit", selectIndex);
							$("#grid").datagrid("updateRow", {
								index : selectIndex,
								row : {
									"app" : val
								}
							});
						}
					})
				},
				formatter : function(val, row, index) {
					return row.app ? row.app.appName : "";
				}
			}, {
				field : 'originGroupId',
				title : '分组ID',
				sortable : true,
				editor : {
					type : "validatebox",
					options : {
						required : true
					}
				}
			}, {
				field : 'groupName',
				title : '组名',
				sortable : true,
				editor : {
					type : "validatebox",
					options : {
						required : true
					}
				}
			}, {
				field : 'userCount',
				title : '用户数量',
				sortable : true,
				editor : {
					type : "validatebox",
					options : {
						required : true
					}
				}
			} ] ],
			onBeforeEdit : function(rowIndex, rowData, changes) {
			},
			onAfterEdit : function(rowIndex, rowData, changes) {
				$.fn.datagrid.extensions.onAfterEdit.apply(this, arguments); //这句一定要加上
				$(this).datagrid("updateRow", {
					index : rowIndex,
					row : rowData
				});
				editRow = true;
			},
			autoEditingEvent : "onDblClickRow",
			autoEditing : true, //该属性启用双击行时自定开启该行的编辑状态
			extEditing : true, //该属性启用行编辑状态的 ExtEditing 风格效果，该属性默认为 true。
			singleEditing : true
		}));

		$("#grid").datagrid('enableFilter', [ {
			field : 'appName',
			searchField : 'app.appName'
		}, {
			field : 'originGroupId',
			javaType : 'N',
			op : [ 'EQ', 'NEQ', 'GT', 'LT', 'GTE', 'LTE', 'ISNULL', 'NOTNULL' ]
		} ]);

		$("#appSelector").click(function() {
			$.easyui.showGridSelector($.extend(appSelectOpts, {
				multiple : false,
				singleSelect : true,
				onEnter : function(val) {
					var appId = val.id;
					var appName = val.appName;
					$("#appId").val(appId);
					$("#appName").val(appName);
				}
			}));
		});

		$("#add").click(function() {
			$("#fm").form("clear");
			$('#fm').form('load', {
				enable : 1
			});

			$("#dlg").dialog("open").dialog("setTitle", "新增微信分组");
		});
		$("#edit").click(function() {
			var rowData = $grid.datagrid("getSelected");
			if (!rowData) {
				showInfo("您未选中行，无法编辑");
			} else {
				$("#dlg").dialog("open").dialog("setTitle", "编辑微信分组");
				$("#fm").form("clear");
				$("#fm").form("load", rowData);
				if (rowData.app) {
					$("#appId").val(rowData.app.id);
					$("#appName").val(rowData.app.appName);
				}
			}
		});
		$("#delete").click(function() {
			multiDeleteDataGrid($grid, "${ctx}/wx/groups/multiDelete");
		});
		$("#search").click(function() {
			$grid.datagrid('load', $("#tt").form("getData"));
		});

		$("#excelExport").click(function() {
			var url = "${ctx}/wx/groups/excelExport?" + $.param($grid.datagrid('options').queryParams);
			if ($grid.datagrid("options").filterRules) {
				url += "&filterRules=" + JSON.stringify($grid.datagrid("options").filterRules);
			}
			window.parent.location.href = url;
		});
	});
</script>
</head>

<body>
	<div data-options="region:'center',fit:true,border:false">
		<table id="grid">
		</table>
	</div>
	<div id="tt" class="row">
		<div class="col-md-4">
			<form class="form-grid-search form-inline">
				<div class="form-group">
					<input type="text" class="form-control"
						name="search_LIKE_groupName" placeholder="分组名称" />
				</div>
				<button type="button" id="search" class="btn btn-primary">
					<span class="glyphicon glyphicon-search"></span> 查询
				</button>
			</form>
		</div>
		<div class="col-md-8">
			<shiro:hasPermission name="groups:update">
				<button id="add" type="button" class="btn btn-primary">
					<span class="glyphicon glyphicon-plus"></span> 新增
				</button>
				<button id="edit" type="button" class="btn btn-primary">
					<span class="glyphicon glyphicon-pencil"></span> 编辑
				</button>
			</shiro:hasPermission>
			<shiro:hasPermission name="groups:delete">
				<button id="delete" type="button" class="btn btn-danger">
					<span class="glyphicon glyphicon-minus"></span> 删除
				</button>
			</shiro:hasPermission>
			<shiro:hasPermission name="groups:export">
				<button id="excelExport" type="button" class="btn btn-primary">
					<span class="glyphicon glyphicon-save"></span> Excel导出
				</button>
			</shiro:hasPermission>
		</div>
	</div>
	<shiro:hasPermission name="groups:update">
		<div id="dlg" class="easyui-dialog"
			style="width: 392px; height: 285px; padding: 10px 20px"
			data-options="resizable:true,modal:true, buttons:'#dlg-btn',closed:true">
			<form id="fm" method="post">
				<input type="hidden" name="id" />
				<table id="tbl">
					<tr>
						<td><label>所属公共账号:</label></td>
						<td><input id="appId" name="app" type="hidden"><input
							id="appName" class="easyui-validatebox"
							data-options="required: true" readonly="readonly" /><a
							id="appSelector" class="easyui-linkbutton easyui-tooltip"
							data-options="plain: true, iconCls: 'icon-metro-search',content:'选取公共账号'"></a></td>
					</tr>
					<tr>
						<td><label>分组ID:</label></td>
						<td><input name="originGroupId" class="easyui-validatebox"
							data-options="required: true"></td>
					</tr>
					<tr>
						<td><label>组名:</label></td>
						<td><input name="groupName" class="easyui-validatebox"
							data-options="required: true"></td>
					</tr>
					<tr>
						<td><label>用户数量:</label></td>
						<td><input name="userCount" class="easyui-validatebox"
							data-options="required: true"></td>
					</tr>
				</table>
			</form>
			<div id="dlg-btn">
				<button id="save" type="button" class="btn btn-primary"
					onclick="formSave('#fm', '#grid', '#dlg', '${ctx}/wx/groups/update');">
					<span class="glyphicon glyphicon-ok"></span> 保存
				</button>
				<button id="close" type="button" class="btn btn-primary"
					onclick="$('#dlg').dialog('close');">
					<span class="glyphicon glyphicon-remove"></span> 取消
				</button>
			</div>
		</div>
	</shiro:hasPermission>
</body>
</html>
